<template>
  <div class="change-password-container">
    <el-row>
      <el-col :span="24">
        <van-nav-bar
          title="忘记密码，请修改密码"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </el-col>
    </el-row>
    <el-form ref="passwordForm" :model="passwordForm" label-width="100px" class="password-form">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="passwordForm.phone" placeholder="请输入手机号" class="qq">
          <template #prefix>
            <i class="el-input__icon el-icon-mobile-phone"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input v-model="passwordForm.password" type="password" placeholder="请输入新密码"  class="qq">
          <template #prefix>
            <i class="el-input__icon el-icon-lock"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmPassword">
        <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请确认新密码" class="qq">
          <template #prefix>
            <i class="el-input__icon el-icon-lock"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" class="submit-button">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {Toast} from "vant";
import axios from "axios";

export default {
  data() {
    return {
      passwordForm: {
        phone: '',
        password: '',
        confirmPassword: ''
      }
    };
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      // 返回上一个页面
      this.$router.push('/');
    },
    submitForm() {
      this.$refs.passwordForm.validate((valid) => {
        if (!valid) {
          return this.$message.error('请填写完整信息');
        }
        if (this.passwordForm.password!== this.passwordForm.confirmPassword) {
          return this.$message.error('新密码和确认密码不一致，请重新输入');
        }
        // 这里实际开发中应该调用接口来修改密码，此处模拟成功后跳转
        // 假设修改密码成功后跳转到登录页面（login页面，具体路由根据实际配置）
        Toast.loading({ message: '检查中...', forbidClick: true });
        axios.post("/user/user/updatePassword", this.passwordForm).then(res => {
          if (res.data.code == 200) {
            this.$message.success("密码修改成功");
            this.passwordForm = {
              phone: '',
              password: '',
              confirmPassword: ''
            };
            this.$router.push('/');
          } else {
            this.$message.error(res.data.message);
          }
        }).catch(error => {
          this.$message.error('请求失败，请稍后再试');
          console.error(error);
        });
      });
    },
  },
};
</script>

<style scoped>
.change-password-container {
  width: 100%;
  margin: 100px auto;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.password-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.el-form-item {
  margin-bottom: 20px;
}

.submit-button {
  width: 80%;
  margin-right: 120px;
}

.el-input__icon {
  text-align: center;
  color: #889aa4;
  margin: 0 auto;
}

.el-form-item__label {
  font-weight: bold;
}

.qq{
  width: 80%;
  height: 50px;
  border-radius: 6px;
  transition: border-color 0.3s ease; /* 添加过渡效果 */
}

.qq:focus {
  border-color: #007aff; /* 输入框获取焦点时边框颜色变化 */
  box-shadow: 0 0 5px rgba(0, 122, 255, 0.3); /* 添加阴影 */
}
</style>
